<template>
  <div class="head">
    <Gua :yaoList="yaoList"/>
    <ji-xuan 
      @updateYaoList="updateYaoList" 
      :yaoCount="count"
      @init="restart"
    />
    <router-link to="/graph">图</router-link>
  </div>   
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import Gua from '../components/Gua.vue'
import JiXuan from '../components/JiXuan.vue'

export default {
  name: 'App',
  components: {
    Gua,
    JiXuan
  },
  data(){
    return {
      yaoList: []
    }
  },

  computed: {
    // 已经完成的yao的数量
    count(){
      return this.yaoList.reduce((sum, cur) => {
        return sum + (cur.type ? 1 : 0)
      }, 0)
    },
  },

  created(){
    this.init()
  },

  methods: {
    init(){
      let yao = {
        type: 0,
        title: ''
      }
      const temp = []
      for(let i = 0; i < 6; i++){
        temp.push(JSON.parse(JSON.stringify(yao)))
      }
      temp.forEach(item => {
        item.id = uuidv4()
      })
      this.yaoList = temp 
    },

    updateYaoList(val){
      this.yaoList[this.count].type = this.getType(val)
    },

    getType(num){
      return (num % 2 ? 2 : 1 )
    },

    restart(){
      this.init()
    }
  }
}
</script>

<style scoped>
.head {
  display: flex;
}
</style>
